<template>
  <div class="total" >
    <!-- 头部标签 -->
 <header>
     <van-nav-bar
  title="评分"
  left-arrow
  @click-left="onClickLeft"
  
/>
 </header>
 <div class="cent" >
    
   <ul>
        <span><van-icon name="orders-o" />  订单详情</span>
     <li> <p>客户</p><i>{{data.cusName}}</i></li>
     <li> <p>商品</p><i>{{data.prodName}}</i></li>
     <li> <p>数量</p><i>1</i></li>
   </ul>
 </div>
 <div class="cent">
    
   <ul >
        <span><van-icon name="orders-o" />  服务评价</span>
       <li>  <p>描述相符</p> <van-rate 
  v-model="data.prodConformityPoint"
  :size="25"
  color="#ffd21e"
  void-icon="star"
  void-color="#eee"
/></li>
  <li>  <p>物流速度</p> <van-rate 
  v-model="data.logisticsSpeedPoint"
  :size="25"
  color="#fe8e5b"
  void-icon="star"
  void-color="#eee"
/></li>
  <li>  <p>服务质量</p> <van-rate 
  v-model="data.serviceQualityPoint"
  :size="25"
  color="#ff5f5e"
  void-icon="star"
  void-color="#eee"
/></li>
   </ul>
 </div>
  <van-field v-model="data.comment" disabled="" type="textarea" rows="4" autosize  />
  
  </div>
</template>

<script>
import {evaluateInfo} from '../../request/api'
export default {
data(){
    return{
        // value1:0,
        //  value2:0,
        //   value3:0,
        //   value4:'',
          data:''
    }
},
created(){
    evaluateInfo(this.$route.params.id).then(res=>{
        console.log(res.data);
        this.data=res.data

    })
},
methods:{
     onClickLeft() {
      this.$router.go(-1)
    },
}
}
</script>

<style lang='less'>
*{
    font-size: .18rem!important;
}
.total{
  background-color: #f5f5f5;
}
header{
    background: #003399;
    .van-nav-bar{background:#003399;
font-size: .2rem;
padding:3% 0 0;
.van-nav-bar__title{
    color: white;
    font-size: .2rem;
}
.van-icon{
    font-size: .2rem;
    color: white;
}
     }
    
}
.cent{
  background: white;
  margin: 0 0 4% 0 ;
  span{
      color: #003399;
      background: #f4fbfe;
      line-height: .45rem;
  }
  ul{
      .van-icon{
          vertical-align: center;
      } 
    margin: 0  4%;
     li{
    line-height: .45rem;
    display: flex;
    p{
        width: 25%;
    }
   
    
  }
  }
 
}

</style>